import React from 'react';
import { Tabs, Table } from 'antd';
import Area from '../../Form/Area/Area';

/**
 * 资源池配额
 */
function ResourceArea(props) {
    const { data = {} } = props;

    const renderNormalTable = (props) => {
        const { dataSource, ...restProps } = props;

        const assignIds = (data) => {
            if (data) return data.map((item, index) => ({ id: index + 1, ...item }));
        };

        return (
            <Table
                rowKey="id"
                scroll={{ x: 'max-content' }}
                pagination={false}
                dataSource={assignIds(dataSource)}
                {...restProps}
            />
        );
    };

    return (
        <Area title="资源池配额">
            <Tabs
                type="card"
                items={[
                    {
                        label: '计算资源',
                        key: 'computing',
                        children: renderNormalTable({
                            columns: [
                                { title: '序号', dataIndex: 'id' },
                                { title: 'az', dataIndex: 'az' },
                                { title: 'vCPU(核)', dataIndex: 'vcpu' },
                                { title: '内存(G)', dataIndex: 'ram' },
                            ],
                            dataSource: data.calResource,
                        }),
                    },
                    {
                        label: '存储资源',
                        key: 'storage',
                        children: renderNormalTable({
                            columns: [
                                { title: '序号', dataIndex: 'id' },
                                { title: '存储集群名称', dataIndex: 'storageClusterName' },
                                { title: '对应az(支持对应多个az)', dataIndex: 'az' },
                                { title: '存储用途', dataIndex: 'application' },
                                { title: '存储类型', dataIndex: 'storageType' },
                                { title: '存储总量(TB)', dataIndex: 'storageSize' },
                            ],
                            dataSource: data.storageResource,
                        }),
                    },
                ]}
            />
        </Area>
    );
}

export default ResourceArea;
